<template>
  <div class="container" :class="{pabting:shareItId}">
    <div class="richText">
      <h2 v-if="contentType !== 'videoList'">{{article.mainTitle}}</h2>
      <div class="videoListTitle" v-else-if="contentType === 'videoList'">
        <div class="title">
          <h2>从小白到大神区块链进阶53讲</h2>
          <i class="iconxiasanjiao" :class="{xzhuan:videoListZankai}" @click="videoListZankai = !videoListZankai"></i>
        </div>
        <div class="videoListDetail" :class="{zankai:videoListZankai}">
          <div class="detailImg">
            <img src="../../assets/image/zanweiImg.jpg" alt="">
          </div>
          <div class="details">
            <h6>课程简介：新人润滑经济，技术驱动 变革《从小白到大神一一区块链进阶 53讲》从专业的视角、独到的见解， 带您从0到1系统地学习</h6>
          </div>
        </div>
      </div>
      <div class="author">
        <div class="headImg" @click="getAuthor(article.author && article.author.id)">
          <img :src="'https://cj-pub.obs.myhwclouds.com/header/'+(article.author && article.author.id)" alt="">
        </div>
        <h3><span @click="getAuthor(article.author && article.author.id)">{{article.author && article.author.nick}}</span><time>{{article.issueTime}}</time></h3>
      </div>
      <div class="sumy" v-if="contentType !== 'videoList'">
        <div class="fudoushow">
          <i class="fudou"></i>
          <span>剩余服豆{{parseFloat((article.beansNum/100000000).toFixed(2))}}</span>
        </div>
      </div>
      <div class="rechTextHtml" v-if="contentType === 'graphic'">
        <!-- 图文内容 -->
        <div class="html" v-html="htmlCont"></div>
        <div class="start" @click="clickFullText" v-if="!isfulltext"><span>点击查看全文↓</span></div>
        <div class="end" v-else>全文完</div>
      </div>
      <div class="likePlate" v-if="contentType !== 'videoList' && 1===2">
        <a href="javascript:;" class="item"><i class="iconReward"></i><span>20</span></a>
        <a href="javascript:;" class="item" :class="{like:upLike}" @click="likeClick()">
          <i :class="upLike?'iconLike2':'iconLike'"></i>
          <span>{{like}}</span>
          <span class="after">+1</span>
        </a>
        <a href="javascript:;" class="item"><i class="iconShare"></i><span>分享</span></a>
      </div>
    </div>


    <!-- 广告 -->
    <a href="javascript:;" class="advert" v-if="contentType !== 'videoList' && 1===2">
      <h3>{{textCut('十月起，上班族满足这些条件，可申请国际M BA学历十月起，上班族满足这些条件，可申请国际M BA学历',30)}}</h3>
      <div class="advertImg">
        <img src="../../assets/image/zanweiImg.jpg" alt="">
      </div>
      <div class="advertDetail">
        <span>APP名称</span>
        <a href="">查看详情</a>
      </div>
    </a>
    <div class="push">
      <template v-for="(item,indexac) in recommend">
        <!-- 图文推荐 -->
        <a v-if="item.type === 'TEXT'" href="javascript:;" @click="qhwz(item.articleId,item.mainTitle,item.author.nick,item.author.id)" class="item">
          <div class="title">
            <h2>{{textCut(item.mainTitle,22)}}</h2>
            <time>{{item.issueTime}}</time>
          </div>
          <div class="showImg">
            <img :src="item.coverPics.length>0 ? $imageURL + item.coverPics[0].icon : '../../../static/img/zanweiImg.jpg'" alt="">
          </div>
        </a>
        <router-link v-if="item.type === 'TEXT' && 1 === 2 && item.coverPics.length === 1" :to="'/longMirror/detail?articleid=' + item.articleId" class="item there">
          <div class="title">
            <h2>阿娇善良的咖啡冷静啊了可是发动机阿列克了三舅独立空间啊收到了空拉开三等奖了；阿斯顿家拉开；第六季卡上阶段卢卡斯的就</h2>
          </div>
          <div class="showImg">
            <img src="../../../static/img/zanweiImg.jpg" alt="">
            <img src="../../assets/image/zanweiImg.jpg" alt="">
            <img src="../../assets/image/zanweiImg.jpg" alt="">
          </div>
          <div class="title">
            <time>{{item.issueTime}}</time>
          </div>
        </router-link>
        <!-- 视频推荐 -->
        <a v-if="item.type === 'VIDEO'" href="javascript:;" @click="qhwz(item.articleId,item.mainTitle,item.author.nick,item.author.id)" class="item video">
          <div class="title">
            <h2>{{textCut(item.mainTitle,22)}}</h2>
            <time>{{item.issueTime}}</time>
          </div>
          <div class="showImg">
            <img :src="item.coverPics.length>0 ? $imageURL + item.coverPics[0].icon : '../../../static/img/zanweiImg.jpg'" alt="">
            <div class="time">
              <i class="iconPlay"></i>
              <time>{{item.medias[0].minutes}}03:50</time>
            </div>
          </div>
        </a>
        <!-- 视频系列推荐 -->
        <router-link v-if="item.type === 'N'" :to="'/longMirror/detail?articleid=' + item.articleId" class="video">
          <div class="playsShowImg">
            <img src="../../assets/image/zanweiImg.jpg" alt="">
            <div class="plays">
              <i class="iconPlay"></i>
            </div>
          </div>
          <div class="playTitle">
            <h2>{{textCut('钢铁侠”埃隆·马斯克又被盯上 其网红喷火器钢铁侠”埃隆·马斯克又被盯上 其网红喷火器',22)}}</h2>
            <h6><em>VIP1</em><span>亿豚网</span><span>时长05:00</span></h6>
            <span>剩余服豆<em>500000</em></span>
          </div>
        </router-link>
      </template>
    </div>
    <div class="comment" v-if="contentType !== 'videoList' && 1===2">
      <div class="item" v-for="(item, index) in 3">
        <div class="headImg">
          <img src="../../assets/image/headimg.jpg" alt="">
        </div>
        <div class="content">
          <div class="title">
            <div class="left">
              <h3>今世缘周周</h3>
              <h4>深圳司迪曼科技有限公司总经理</h4>
            </div>
            <div class="right">
              <a href="javascript:;" :class="{like:upLike}" @click="likeClick()">
                <i :class="upLike?'iconzan2':'iconzan'"></i>
                <span>488</span>
                <span class="after">+1</span>
              </a>
            </div>
          </div>
          <div class="comCont">
            <h3>想更多的了解和应用，除了知道这个词， 听不懂内容，求大神为我带路。</h3>
            <h4><span>5小时前</span><em>·</em><a href="">24回复</a></h4>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottomBtn" v-if="shareItId">
      <div class="cont">
        <div class="logo">
          <img src="../../assets/logo.png" alt="">
          <div class="contx">
            <h3>长鉴APP</h3>
            <h5>分享创造价值</h5>
          </div>
        </div>
        <a :href="'/phone' + (code ? '?code=' + code : '')" class="btna">跟我去挖矿</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'container',
  data () {
    return {
      shareItId: this.$route.query.shareItId, //分享ID
      articleid: this.$route.query.articleid, //文章id
      code: this.$route.query.code || null, //文章id
      contentType: 'graphic', // graphic:图文   video:视频    videoList:视频列表
      upLike: false,
      like: 488,
      videoListZankai:false,
      article: {},
      // 字符串截取
      isfulltext: false,
      spTags: ['img', 'br', 'hr'],
      htmlCont: '',
      recommend: [],
      htmlContBak: ''
    }
  },
  mounted () {
    this.start(this.articleid)
    if (this.shareItId) {
      this.$fetch({
        url: '/cms/share/show/' + this.shareItId
      })
    }
  },
  methods: {
    getAuthor (id) {
      if (this.shareItId) {
        window.location.href='/phone' + (this.code ? '?code=' + this.code : '')
      } else {
        if (this.isMobileDevice() === 0) {
          // 掉 ios 的 getAuthorId(id) 方法 参数为ID
          window.webkit.messageHandlers.getAuthorId.postMessage(id);
        } else {
          // 掉 安卓 的 getAuthorId(id) 方法 参数为ID
          window.App.getAuthorId(id)
        }
      }
    },
    qhwz (articleId, mainTitle, nick, authorId) {
      let url = ''
      if (this.shareItId) {
        url += '&shareItId=' + this.shareItId
        if (this.code) {
          url += '&code=' + this.code
        }
        window.location.href='/longMirror/detail?articleid=' + articleId + url
        return
      } else {
        let data = {
          id: articleId,
          header: 'https://cj-pub.obs.myhwclouds.com/header/' + authorId,
          authorId: authorId,
          mainTitle,
          nick
        }
        if (this.isMobileDevice() === 0) {
          // 掉 ios 的 getId(data) 方法 参数为data
          window.webkit.messageHandlers.getId.postMessage(JSON.stringify(data));
        } else {
          // 掉 安卓 的 getId(data) 方法 参数为data
          window.App.getId(JSON.stringify(data))
        }
        window.location.href='/longMirror/detail?articleid=' + articleId
      }
    },
    /**
     * @deprecated 获取文章内容
     *
     * */
    start (articleid) {
      // 文章详情
      this.$fetch({
        url: '/cms/show/' + articleid
      }).then(res => {
        if (res.code === 200) {
          if (res.data.type === 'TEXT') {
            this.contentType = 'graphic'
            this.htmlContBak = res.data.text.details
            this.htmlCont = this.stringSubArtc(res.data.text.details, 274)
          } else if (res.data.type === 'VIDEO') {
            this.contentType = 'video'
          }
          this.article = res.data

          document.title = this.article.mainTitle;
          // 列表
          this.$fetch({
            url: '/cms/show/hots/' + articleid,
          }).then(res => {
            if (res.code === 200) {
              this.recommend = res.data
            }
          })
        }
      })
    },
    /**
     * @deprecated 文字裁剪(将被裁剪的文字，裁剪后的字数)
     * @param text
     * @param sum
     * @returns {string}
     */
    textCut (text, sum) {
      var ar = ''
      if (text.length > sum) {
        for(var i=0; i<text.length; i++){
          if (i<sum) {
            ar += text[i]
          }
        }
        return ar+'…'
      } else {
        return text
      }

    },
    /**
     * @deprecated 点赞
     */
    likeClick (index) {
      if( !this.upLike ){
        this.like += 1
        this.upLike = !this.upLike
      }
    },
    /**
     * @deprecated 文字长度判断
     * @param arr
     * @param it
     * @returns {boolean}
     */
    stringContains (arr,it) {
      for(var i=0,len=arr.length;i<len;i++){
        if(arr[i]==it){
          return true;
        }
      }
      return false;
    },
    stringSubArtc (article,worldNum) {

      var result = [];
      /*首先截取需要的字串*/
      var wcount = 0;
      var startTags = [],endTags = [];
      var isInTag = false;

      for(var i=0,len=article.length;i<len;i++){
        var w = article[i];
        result.push(w);
        if(w=="<"){
          isInTag = true;
        }
        if(!isInTag){
          wcount++;
          if(wcount==worldNum){
            break;
          }
        }
        if(w==">"){
          isInTag = false;
        }
      }
      if (wcount<worldNum) {
        this.isfulltext = true
      }

      /*对字串进行处理*/
      var j=0;
      isInTag = false;
      var isStartTag = true;
      var tagTemp = "";
      while(j<i){
        w = result[j];
        if(isInTag){
          if(w==">" || w==" " || w=="/"){
            isInTag = false;
            if(isStartTag){
              startTags.push(tagTemp);
            }else{
              endTags.push(tagTemp);
            }
            tagTemp = "";
          }
          if(isInTag){
            tagTemp+=w;
          }
        }
        if(w=="<"){
          isInTag = true;
          if(result[j+1]=="/"){
            isStartTag = false;
            j++;
          }else{
            isStartTag = true;
          }
        }
        j++;
      }

      /*剔除img,br等不需要成对出现的标记*/
      var newStartTags = [];
      for(var x=0,len=startTags.length;x<len;x++){
        if(!this.stringContains(this.spTags,startTags[x])){
          newStartTags.push(startTags[x]);
        }
      }

      /*添加没有的结束标记*/
      var unEndTagsCount = newStartTags.length - endTags.length;
      while(unEndTagsCount>0){
        result.push("<");
        result.push("/")
        result.push(newStartTags[unEndTagsCount-1]);
        result.push(">");
        unEndTagsCount--;
      }
      return result.join("");
    },
    clickFullText () {
      this.htmlCont = this.htmlContBak
      this.isfulltext = true
    }
  }
}
</script>
<style scoped lang='less' type="text/less" rel="stylesheet/less">
.yt-textEll{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

.container{
  background: #fff;
}
.container{
  padding: .32rem .34rem .12rem .34rem;
}
.pabting{
  padding-bottom: 1.2rem;
}
.iconReward{
  display: inline-block;
  width: .4rem;
  height: .4rem;
  background: url("../../assets/image/reward.png");
  background-size: .4rem .4rem;
}
.iconLike{
  display: inline-block;
  width: .4rem;
  height: .4rem;
  background: url("../../assets/image/like.png");
  background-size: .4rem .4rem;
}
.iconLike2{
  display: inline-block;
  width: .4rem;
  height: .4rem;
  background: url("../../assets/image/like2.png");
  background-size: .4rem .4rem;
}
.iconzan{
  display: inline-block;
  width: .24rem;
  height: .24rem;
  background: url("../../assets/image/like.png");
  background-size: .24rem .24rem;
}
.iconzan2{
  display: inline-block;
  width: .24rem;
  height: .24rem;
  background: url("../../assets/image/like2.png");
  background-size: .24rem .24rem;
}
.iconShare{
  display: inline-block;
  width: .4rem;
  height: .4rem;
  background: url("../../assets/image/share.png");
  background-size: .4rem .4rem;
}
.iconxiasanjiao{
  width: .16rem;
  height: .12rem;
  display: block;
  background: url("../../assets/image/iconxsj.png") no-repeat center;
  background-size: .16rem .12rem;
}
.iconPlay{
  cursor: pointer;
  width: .2rem;
  height: .24rem;
  display: block;
  background: url("../../assets/image/play.png") no-repeat center;
  background-size: .2rem .24rem;
}
.fudou{
  width: .4rem;
  height: .4rem;
  display: inline-block;
  vertical-align: middle;
  background: url("../../assets/image/fudou.png") no-repeat 0 0;
  background-size: 100% 100%;
}
//  富文本
.richText{
  h2{
    color: #333333;
    font-size: .36rem;
    line-height: .54rem;
  }
  .author{
    margin-top: .22rem;
    font-size: 0;
    .headImg{
      width: .48rem;
      height:.48rem;
      border-radius: 50%;
      background: #f4f4f4;
      display: inline-block;
      vertical-align: top;
      img{
        width: .48rem;
        height:.48rem;
        border-radius: 50%;
      }
    }
    h3{
      height:.48rem;
      margin-left: .24rem;
      display: inline-block;
      vertical-align: top;
      line-height: .48rem;
      font-weight: 400;
      span{
        font-size: .28rem;
        color: #333333;
        display: inline-block;
        vertical-align: middle;
      }
      time{
        color: #999999;
        line-height: .48rem;
        font-size: .24rem;
        margin-left: .24rem;
        display: inline-block;
        vertical-align: middle;
      }
      a{
        text-decoration: none;
        color: #F13535;
        line-height: .48rem;
        font-size: .24rem;
        margin-left: .18rem;
        display: inline-block;
        font-style: normal;
        vertical-align: middle;
        position: relative;
        padding: 0 .16rem;
        &::after{
          content: '';
          width: .04rem;
          height: .04rem;
          border-radius: 50%;
          background: #F13535;
          display: block;
          position: absolute;
          left: -.02rem;
          top:.22rem;
        }
      }
    }
  }
  .sumy{
    font-size: 0;
    border-radius: 2rem;
    padding: 0 .4rem;
    margin-top: .32rem;
    text-align: center;
    .fudoushow{
      border: 1px solid #D8D8D8;
      display: inline-block;
      line-height: .72rem;
      border-radius: 2rem;
      padding: 0 .4rem;
      span{
        display: inline-block;
        vertical-align: middle;
        font-size: .28rem;
        color: #666666;
        margin-left: .16rem;
      }
    }
  }
  .rechTextHtml{
    margin-top: .3rem;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    &.contheight{
      height: 10rem;
    }
    .html{
      font-size: .32rem;
      line-height: .58rem;
      color: #333;
      /deep/img{
        margin: .16rem 0;
        display: block;
        width: 100% !important;
      }
    }
    .start{
      font-size: .28rem;
      line-height: 1.2rem;
      width: 100%;
      text-align: center;
      height: 1.2rem;
      background: url("./img/jbbg.png") no-repeat 0 0;
      position: absolute;
      left: 0;
      bottom: 0;
      span{
        display: block;
        font-size: .28rem;
        line-height: .8rem;
        margin-top: .4rem;
        width: 100%;
        height: .8rem;
        color: #f13535;
      }
    }
    .end{
      text-align: center;
      font-size: .32rem;
      line-height: .42rem;
      color: #333;
      font-weight: 700;
      margin: .2rem;
    }
  }
  .likePlate{
    margin-top: .3rem;
    display: flex;
    justify-content: space-around;
    padding-bottom: .2rem;
    .item{
      display: flex;
      align-items: center;
      cursor: pointer;
      text-decoration: none;
      padding: .1rem .2rem;
      span{
        font-size: .32rem;
        line-height: .36rem;
        color: #333333;
        margin-left: .16rem;
      }
      .after{
        font-size: .6rem;
        font-weight: 700;
        color: #f13535;
        display: block;
        position: absolute;
        left: .4rem;
        top: 0;
        opacity:0;
      }
      &.like{
        position: relative;
        span{
          color: #f13535;
        }
        .after{
          animation:myfirst 1s;
        }
      }
    }
  }
  //  标题
  .videoListTitle{
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .04rem;
      h2{
        font-size: .36rem;
        color: #333;
        line-height: .54rem;
      }
      i{
        padding: .2rem;
        transition: all .2s;
        &.xzhuan{
          transform:rotate(180deg);
        }
      }
    }
    .videoListDetail{
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      height: 0;
      transition: all .2s;
      &.zankai{
        height: 1.5rem;
      }
      .detailImg{
        width: 2.26rem;
        height: 1.5rem;
        img{
          width: 2.26rem;
          height: 1.5rem;
        }
      }
      .details{
        width: 4rem;
        height: 1.5rem;
        h6{
          font-size: .24rem;
          line-height: .36rem;
          color: #333333;
          font-weight: 400;
        }
      }
    }
  }
}
//  广告
.advert{
  margin: .32rem 0;
  width: 6.82rem;
  border: 1px solid #f0f0f0;
  padding-bottom: .25rem;
  display: block;
  text-decoration: none;
  h3{
    padding: .25rem .28rem;
    font-size: .32rem;
    color: #333;
    font-weight: 400;
    line-height: .48rem;
  }
  .advertImg{
    width: 100%;
    font-size: 0;
    img{
      width: 100%
    }
  }
  .advertDetail{
    margin-top: .24rem;
    height: .48rem;
    display: flex;
    padding: 0 .26rem;
    justify-content: space-between;
    align-items: center;
    span{
      font-size: .24rem;
      color: #999;
    }
    a{
      text-decoration: none;
      border: 1px solid #f13535;
      color: #f13535;
      line-height: .44rem;
      height: .44rem;
      display: inline-block;
      font-size: .24rem;
      padding: 0 .16rem;
      border-radius: .06rem;
    }
  }
}
//  推送
.push{
  margin-top: .4rem;
  .item{
    padding: .24rem 0;
    &:not(:last-child){
      border-bottom: 1px solid #f0f0f0;
    }
  }
  .video{
    &:not(:last-child){
      .playTitle{
        border-bottom: 1px solid #f0f0f0;

      }
    }
  }
  .item,.video{
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    &.video{
      .title{
        h2{
          height: .96rem;
        }
      }
      .showImg{
        height: 1.26rem;
        img{
          height: 1.26rem;
        }
      }
    }
    .title{
      width: 4.3rem;
      h2{
        font-weight: 400;
        color: #333333;
        font-size: .32rem;
        height: 1.4rem;
      }
      time{
        display: block;
        font-size: .24rem;
        color: #999;
        line-height: .3rem;
      }
    }
    .showImg{
      width: 2.26rem;
      height: 1.7rem;
      position: relative;
      img{
        width: 2.26rem;
        height: 1.7rem;
      }
      .time{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: .16rem;
        right: .16rem;
        font-size: .24rem;
        line-height: .4rem;
        padding: 0 .16rem;
        color: #fff;
        background: rgba(0,0,0,.1);
        i{
          margin-right: .1rem;
        }
      }
    }
    .playsShowImg{
      width: 1.56rem;
      height: .88rem;
      position: relative;
      margin: .3rem 0;
      left:0;
      bottom: 0;
      right: 0;
      top:0;
      img{
        width: 1.56rem;
        height: .88rem;
        position: absolute;
        left:0;
        top:0;
      }
      .plays{
        position: absolute;
        left:0;
        bottom: 0;
        right: 0;
        top:0;
        margin: auto;
        width: 0.2rem;
        height: 0.24rem;
      }
    }
    .playTitle{
      width: 5rem;
      padding: .24rem 0;
      font-size: 0;
      h2{
        font-size: .32rem;
        line-height: .54rem;
        color: #333;
        font-weight: 400;
        .yt-textEll;
      }
      h6{
        font-weight: 400;
        font-size: .24rem;
        span{
          color: #999999;
          font-size: .24rem;
          margin-right: .3rem;
        }
        em{
          background: #f13535;
          color: #fff;
          height: .24rem;
          line-height: .24rem;
          font-size: .2rem;
          padding: 0 .1rem;
          display: inline-block;
          border-radius: .08rem 0 .08rem 0;
          margin-right: .36rem;
        }
      }
      >span{
        height: .38rem;
        display: inline-block;
        line-height: .38rem;
        background: #fff1f1;
        font-size: .24rem;
        border-radius: 2rem;
        padding: 0 .17rem;
        color: #666;
        margin-top: .14rem;
        em{
          color: #f13535;
          font-style: normal;
        }
      }
    }

  }
  .there{
    display: block;
    .title{
      display: block;
      h2{
        display: block;
      }
      width: 100%;
    }
    .showImg{
      margin: .12rem 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      img{
        width: 2.22rem;
      }
    }
  }
}
//  评论
.comment{
  margin-top: .3rem;
  .item{
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    .headImg{
      width: .72rem;
      height: .72rem;
      overflow: hidden;
      border-radius: 50%;
      background: #888;
      img{
        width: .72rem;
        height: .72rem;
        border-radius: 50%;
        display: block;
      }
    }
    .content{
      width: 5.9rem;
      .title{
        display: flex;
        justify-content: space-between;
        .left{
          width: 4.6rem;
          h3{
            font-size: .28rem;
            font-weight: 400;
            color: #333333;
            line-height: .38rem;
          }
          h4{
            font-size: .24rem;
            font-weight: 400;
            color: #999999;
            line-height: .38rem;
          }
        }
        .right{
          font-size: 0;
          a{
            display: flex;
            align-items: center;
            text-decoration: none;
            padding: .05rem;
            span{
              margin-left: .1rem;
              color: #333;
              font-size: .24rem;
            }
            .after{
              font-size: .4rem;
              font-weight: 700;
              color: #f13535;
              display: block;
              position: absolute;
              left: .1rem;
              top: 0;
              opacity:0;
            }
            &.like{
              position: relative;
              span{
                color: #f13535;
              }
              .after{
                animation:myfirst 1s;
              }
            }
          }
        }
      }
      .comCont{
        margin-top: .16rem;
        h3{
          font-size: .32rem;
          line-height: .48rem;
          color: #333333;
          font-weight: 400;
        }
        h4{
          margin-top: .2rem;
          font-weight: 400;
          font-size: .24rem;
          span{
            font-size: .24rem;
            line-height: .48rem;
            color: #999999;
          }
          em{
            margin: 0 .16rem;
          }
          a{
            color: #333333;
            font-size: .24rem;
            height: .48rem;
            display: inline-block;
            line-height: .48rem;
            background: #f4f4f4;
            padding: 0 .16rem;
            text-decoration: none;
            border-radius: 2rem;
          }
        }
      }
    }
  }
}

.bottomBtn{
  width: 100%;
  height: .8rem;
  line-height: .98rem;
  background: #fff;
  box-shadow: 0 .1rem .2rem rgba(0,0,0,.6);
  position: fixed;
  left: 0;
  bottom: 0;
  padding: .16rem 0;
  font-size: 0;
  .cont{
    height: .8rem;
    padding: 0 .32rem;
    .logo{
      width: 3rem;
      height: .8rem;
      float: left;
      img{
        width: .8rem;
        height: .8rem;
        display: inline-block;
        vertical-align: top;
      }
      .contx{
        display: inline-block;
        vertical-align: top;
        margin-left: .2rem;
        h3{
          padding-top: .06rem;
          font-size: .3rem;
          font-weight: 700;
          color: #333;
          line-height: .4rem;
        }
        h5{
          font-weight: 400;
          color: #999999;
          font-size: .24rem;
          line-height: .4rem;
        }
      }
    }
    .btna{
      display: block;
      height: .6rem;
      border: 1px solid #f13535;
      border-radius: .07rem;
      float: right;
      margin-top: .1rem;
      font-size: .28rem;
      color: #f13535;
      line-height: .6rem;
      padding: 0 .2rem;
      text-decoration: none;
    }
  }
}

@keyframes myfirst
{
  from {
    top:0;
    opacity:1;
  }
  to {
    top:-3rem;
    opacity:0;
  }
}
</style>
